// TimePicker

@import '../../style/themes/default';
@import '../../style/mixins/index';
@import './param';

@mixin time-picker {
  width: 100%;
  @include flex();
  > label {
    display: inline-block;
    height: $--x-time-picker-height;
    line-height: $--x-time-picker-height;
    position: relative;
    color: $--x-text-300;
    font-weight: 600;
    @include text-align();
  }
  > .#{$--x-time-picker-prefix}-row {
    flex: 1;
    display: flex;
    align-items: center;
    position: relative;
    > x-input {
      > .x-input {
        > .x-input-row {
          > input {
            cursor: pointer;
          }
        }
      }
    }
  }
  &.x-invalid,
  &.x-required {
    > label {
      color: $--x-danger;
    }
  }
  &.x-disabled {
    > .#{$--x-time-picker-prefix}-row {
      > x-input {
        > .x-input {
          > .x-input-row {
            > input {
              cursor: not-allowed;
            }
          }
        }
      }
    }
  }
  &.x-flex {
    &.x-direction {
      &-row {
        > label {
          padding: 0 0.5rem 0 0;
        }
      }
      &-row-reverse {
        > label {
          padding: 0 0 0 0.5rem;
        }
      }
      &-column {
        align-items: inherit;
      }
      &-column-reverse {
        align-items: inherit;
      }
    }
  }
}

@mixin time-picker-portal {
  display: block;
  height: 100%;
}

@mixin time-picker-frame {
  $prefix: $--x-time-picker-frame-prefix;
  margin: 0.0625rem 0;
  font-size: $--x-time-picker-font-size;
  color: $--x-text;
  border: $--x-time-picker-border;
  border-radius: $--x-border-radius;
  box-shadow: $--x-box-shadow-light;
  background-color: $--x-background;
  font-size: $--x-font-size-small;
  display: block;
  height: 100%;
  > div:not(:first-child) {
    border-left: $--x-time-picker-border;
  }
  &-hour,
  &-minute,
  &-second {
    position: relative;
    float: left;
    overflow: hidden;
    width: 3.625rem;
    max-height: 15rem;
    padding-bottom: 13.125rem;
    &:hover {
      overflow-y: auto;
    }
    > x-list {
      > .x-list {
        width: 3.625rem;
        > x-list-option {
          min-width: 3.625rem;
          > .x-list-option {
            padding-left: 0.6rem;
            &:not(:first-child) {
              margin-top: 0;
            }
          }
        }
      }
    }
  }
}
